<template>
    <div :style="{ padding: '10px', background: 'red' }">
        <div>{{ name3 }}</div>
        <div>{{ name1 }}</div>
        <div @click="BsetName">修改 username ： 123</div>
        <div @click="BsetNames">修改 username ： 456</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { useStore, mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default defineComponent({
    setup() {
        const store = useStore();
        const stateA = computed(() => store.state.asyncRoutes);
        const stateB = computed(() => store.state.user.name);
        const statec = computed(() => store.state.asyncRoutes);
        const stated = computed(() => store.state.user.name);
        const BsetName = () => {
            // 触发mutations，用于同步修改user模块state的信息
            store.commit("user/setNames", "123");
        };
        const BsetNames = () => {
            // 触发Action，用于异步修改user模块state的信息
            store.dispatch("user/setName", "456");
        };

        return {
            name3: stateA,
            name1: stateB,
            BsetName,
            BsetNames,
        };
    },
});
</script>
<style lang="less" scoped>
</style>
